<template>
	<div class="web-title-container" id="web-title">
		<p class="web-title-text">
			<span class="title">{{ $t('chat-window') }}</span>
			<span v-if="type === 'im'" class="button-wrapper">
				<span class="button tooltip" @click="clickAudioCall" :class="members > 2 ? 'disable-audio' : 'audio'">
					<span class="tooltiptext">{{ $t('voice-call') }}</span>
				</span>
				<span class="button tooltip" @click="clickVideoCall" :class="members > 2 ? 'disable-video' : 'video'">
					<span class="tooltiptext">{{ $t('video-call') }}</span>
				</span>
			</span>
		</p>
	</div>
</template>

<script>
import zcoIMEvent from '@/store/event';
export default {
	data() {
		return {
			type: '', // im | video | audio
			members: 0, // 在线人数
			isRequesting: false // 是否在请求中
		};
	},
	mounted() {
		zcoIMEvent.onUpdateWebTitle(data => {
			const { type, members } = data || {};
			this.type = type;
			this.members = members;
		});
	},
	methods: {
		// 点击语音通话按钮
		clickAudioCall() {
			if (this.members > 2) {
				this.$zcoMessage({
					type: 'warning',
					message: `${this.$t('multi-party-not-support-upgrading')}`,
					duration: 3
				});
				return;
			}
			if (this.isRequesting) return;
			this.isRequesting = true;
			zcoIMEvent.requestAudioCall();
			const self = this;
			setTimeout(() => {
				self.isRequesting = false;
			}, 1000);
		},
		// 点击视频通话按钮
		clickVideoCall() {
			if (this.members > 2) {
				this.$zcoMessage({
					type: 'warning',
					message: `${this.$t('multi-party-not-support-upgrading')}`,
					duration: 3
				});
				return;
			}
			if (this.isRequesting) return;
			this.isRequesting = true;
			zcoIMEvent.requestVideoCall();
			const self = this;
			setTimeout(() => {
				self.isRequesting = false;
			}, 1000);
		}
	}
};
</script>

<style scoped>
.web-title-container .web-title-text {
	font-size: 13px;
	font-weight: 500;
	color: #2d2d2d;
	padding: 14px;
	display: flex;
	justify-content: space-between;
}
.title {
	display: inline-block;
	line-height: 22px;
}
.button-wrapper {
	display: flex;
	justify-content: center;
}
.button {
	width: 18px;
	height: 22px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	cursor: pointer;
}
.audio {
	background-image: url(../../assets/img/audio.png);
}
.video {
	background-image: url(../../assets/img/video.png);
	margin-left: 13px;
}
.disable-audio {
	background-image: url(../../assets/img/audio-disable.png);
}
.disable-video {
	background-image: url(../../assets/img/video-disable.png);
	margin-left: 13px;
}
</style>

<style>
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	font-size: 13px;
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
</style>
